<template>
	<view class="">
		<view class="nav_top-bg">
			<u-navbar title="收支明细">
				<view class="u-nav-slot" slot="left">
					<u-icon name="arrow-left" @click="go_black" size="19"></u-icon>
					<u-line direction="column" :hairline="false" length="16" margin="0 10px"></u-line>
					<u-icon name="home" @click="goHome" size="20"></u-icon>
				</view>
			</u-navbar>
		</view>
		<!-- 明细 -->
		<view class="mingxi d-flex align-items">
			<view class="jf-w" :current="current" @click="chage_tabs(jianfang)"
				v-for="(jianfang,index) in jianfang_lists" :key="index">
				<view :class="current == index ? 'jf-w-t-xz' : 'jf-w-t'">{{jianfang.tabs_name}}</view>
				<view :class="current == index ? 'line' : ''"></view>
			</view>
		</view>
		<!-- 收入明细 -->
		<view class="shouru">
			<view class="w-630" >
				<view class="d-flex align-items justify-content-space-between margin-top-30" v-for="(mingxi,inidex) in mingxilist" :key="index">
					<view class="">
						<view class="sr-t">{{mingxi.memo}}</view>
						<view class="sr-time">{{mingxi.shijian}}</view>
					</view>
					<view class="sr-num">{{mingxi.money}}</view>
				</view>
			</view>
		</view>
		<!-- 支出明细 -->
		<!-- <view class="shouru" v-if="current == 1">
			<view class="w-630">
				<view class="d-flex align-items justify-content-space-between margin-top-30">
					<view class="">
						<view class="sr-t">账户提现</view>
						<view class="sr-time">2024-07-20 12:00:56</view>
					</view>
					<view class="sr-num">-365.00</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {moneyLogPlus} from '@/api/user.js'
	export default {
		data(){
			return{
				current: 0,
				jianfang_lists: [{
					tabs_name: '收入明细',
					id: 0
				}, {
					tabs_name: '支出明细',
					id: 1
				}],
				page:1,
				limit:7,
				mingxilist:[],
			}
		},
		onLoad() {
			this.get_mingxi()
		},
		methods:{
			go_black() {
				uni.navigateBack({
					delta: 1
				})
			},
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			// 获取余额明细
			get_mingxi(){
				var data = {
					list_rows: this.limit,
					page: this.page,
					type: this.current
				}
				moneyLogPlus(data).then(res => {
					console.log("余额明细",res);
					if(res.code == 1){
						this.mingxilist = res.data.list
					}
					
				})
			},
			chage_tabs(e) {
				console.log("选择收支明细", e);
				this.current = e.id
				this.get_mingxi()
				this.page = 1
			},
		}
	}
</script>

<style>
	.sr-num{
		font-size: 30rpx;
		font-weight: normal;
		line-height: 42rpx;
		color: #FF6400;
	}
	.sr-time{
		font-size: 24rpx;
		font-weight: normal;
		line-height: 45rpx;
		color: #999999;
	}
	.sr-t{
		font-size: 30rpx;
		font-weight: normal;
		line-height: 42rpx;
		color: #333333;
	}
	.shouru{
		width: 690rpx;
		background-color: #fff;
		border-radius: 8rpx;
		margin: 20rpx auto;
		padding: 20rpx 0;
	}
	.line {
		width: 48rpx;
		height: 4rpx;
		margin: auto;
		margin-top: 0rpx;
		background: #FF6400;
	}
	.jf-w-t-xz {
		font-size: 32rpx;
		font-weight: 600;
		text-align: center;
		color: #FF6400;
	}
	
	.jf-w-t {
		font-size: 32rpx;
		font-weight: normal;
		text-align: center;
		color: #1D2129;
	}
	
	.jf-w {
		width: 50%;
		text-align: center;
		line-height: 80rpx;
	}
	.mingxi{
		width: 690rpx;
		height: 84rpx;
		background-color: #fff;
		border-radius: 8rpx;
		margin: 30rpx auto;
	}
	page {
		background-color: #F7F8FB;
	}
</style>